<template>
  <div class="myteam">
    <div class="myteam_head">
      <div class="myteam_head_list">
        <span
          class="headList"
          v-for="(item, idx) in headList"
          :key="idx"
          @click="changeList(item.group)"
          :class="activeStyle(item.group)"
        >{{ item.name }}</span>
      </div>
    </div>
    <div class="myteam_search">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="会员ID">
          <el-input v-model="form.id" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.username" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="注册时间" size="mini" class="time">
          <el-date-picker
            v-model="createtime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            class="createtime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="上级">
          <el-input v-model="form.desc" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="是否试用">
          <el-select v-model="form.region" placeholder="是否试用" size="mini">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="onSubmit">
        <el-button type="primary" @click="getTableList" icon="el-icon-search">查 询</el-button>
        <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="myteam_table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headStyle"
        :cell-style="
            () => {
              return 'text-align: center;';
            }
          "
        height="550"
        size="mini"
      >
        <el-table-column prop="username" label="姓名（昵称）" width="180"></el-table-column>
        <el-table-column prop="name" label="备注" width="180"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="id" label="会员ID"></el-table-column>
        <el-table-column prop="loginip" label="位置"></el-table-column>
        <el-table-column prop="leader" label="上级"></el-table-column>
        <el-table-column prop="name" label="会员类型"></el-table-column>
        <el-table-column prop="createtime" label="注册时间"></el-table-column>
        <el-table-column prop="address" label="付费时间"></el-table-column>
        <el-table-column prop="address" label="到期时间"></el-table-column>
        <el-table-column prop="address" label="会员状态"></el-table-column>
        <el-table-column prop="logintime" label="活跃"></el-table-column>
      </el-table>
    </div>
    <div class="myteam_pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="myteamQueryList.page_no"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="myteamQueryList.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
  
  <script>
import { userIndex } from "@/api/team/index";
import { mapState } from "vuex";
export default {
  name: "Geometry1Myteam",
  data() {
    return {
      headList: [
        { name: "全部", group: 4 },
        { name: "已沟通", group: 2 },
        { name: "待沟通", group: 1 },
        { name: "暂缓沟通", group: 3 }
      ],
      group: 1,
      is_talk: 4,
      createtime: [],
      form: {
        id: "",
        username: "",
        createtime: ""
      },
      tableData: [],
      myteamQueryList: {
        page_no: 1,
        page_size: 10
      },
      total: 0
    };
  },

  mounted() {
    this.getTableList();
  },
  watch: {
    group() {
      this.getTableList();
    },
    is_talk() {
      this.getTableList();
    }
  },
  computed: {
    ...mapState("login", ["userinfo"])
  },
  methods: {
    async getTableList() {
      var begin_time = "";
      var end_time = "";
      if (this.createtime.length !== 0) {
        begin_time = this.createtime[0];
        end_time = this.createtime[1];
      } else {
        begin_time = "";
        end_time = "";
      }
      const { data } = await userIndex({
        ...this.myteamQueryList,
        end_time,
        begin_time,
        filter: {
          ...this.form,
          is_talk: this.is_talk
        },
        topleader: this.userinfo.id,
        group: this.group
      });
      console.log(data);
      this.tableData = data.list;
      this.total = data.total;
    },
    changeList(group) {
      this.is_talk = group;
    },
    activeStyle(group) {
      if (group == this.is_talk) {
        return "active";
      }
    },
    headStyle() {
      return "background: #F4F4F4;text-align: center;";
    },
    reset() {},
    handleSizeChange() {},
    handleCurrentChange() {}
  }
};
</script>
  
  <style lang="less" scoped>
.myteam {
  &_head {
    width: calc(100% - 60px);
    height: 57px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 32px;
    box-sizing: border-box;
    border-bottom: 2px solid #eff1f5;

    &_list {
      margin-right: 30px;
      height: 100%;
      line-height: 57px;
      span {
        display: inline-block;
        height: 100%;
      }
      .left {
        margin-right: 20px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 1px;
          height: 100%;
          background: #ccc;
          right: -10px;
        }
      }
      .headList {
        margin-right: 15px;
        color: #999999;
        cursor: pointer;
      }
    }
    .active {
      color: #111;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #3377ff;
      }
    }
  }
  &_search {
    width: calc(100% - 60px);
    min-height: 60px;
    border-radius: 10px;
    background: #f7f7f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-left: 30px;
    /deep/ .el-form--inline {
      text-align: left;
      .el-form-item {
        margin-bottom: unset;
        margin-top: 10px;
      }
      .time {
        margin-top: 15px;
      }
      .el-input__inner {
        max-width: 150px;
      }
      .createtime {
        max-width: 220px;
      }
    }
    .onSubmit {
      margin-right: 10px;
      .el-button {
        height: 32px;
        padding: 8px 20px;
        &:nth-child(1) {
          background: #165dff;
        }
      }
    }
    &_table {
    }
  }
  &_table {
    margin: 20px 10px 10px 10px;
    box-sizing: border-box;
  }
  &_pagination {
    width: 100%;
    height: 50px;
    text-align: right;
  }
}
</style>